/*---------------------
  Contact
-----------------------*/
.contact {
  
  .section-title {
    margin-bottom: 40px;

    h2 {
      margin-bottom: 42px;
    }

    p {
      font-size: 20px;
      line-height: 30px;
    }
  }
}

.contact__form {

  .input__item {
    margin-bottom: 26px;

    span {
      display: block;
      color: $heading-color-2;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    input {
      font-size: 15px;
      color: $heading-color-2;
      height: 40px;
      width: 100%;
      padding-left: 20px;
      border: 1px solid rgba(0, 0, 0, 0.1);

      &::placeholder {
        color: $heading-color-2;
      }
    }

    textarea {
      font-size: 15px;
      color: $heading-color-2;
      height: 150px;
      width: 100%;
      padding-left: 20px;
      padding-top: 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      resize: none;

      &::placeholder {
        color: $heading-color-2;
      }
    }
  }
}

/*---------------------
  Map
-----------------------*/
.map {
  height: 545px;
  position: relative;

  iframe {
    width: 100%;
  }
}

.map__inside {
  background: $white-color;
  position: absolute;
  right: 0;
  top: 240px;
  left: 0;
  text-align: center;
  width: 350px;
  padding: 30px 25px 25px;
  border-radius: 2px;
  margin: 0 auto;
  box-shadow: 0px 10px 60px rgba(198, 198, 198, 0.3);

  &:after {
    position: absolute;
    left: 50%;
    top: -20px;
    border-left: 10px solid transparent;
    border-bottom: 25px solid $white-color;
    border-right: 10px solid transparent;
    content: "";
    margin-left: -10px;
    box-shadow: 0px 10px 60px rgba(198, 198, 198, 0.3);
  }

  h4 {
    color: $heading-color-2;
    font-weight: 700;
    margin-bottom: 10px;
  }

  ul {

    li {
      list-style: none;
      color: $heading-color-2;
      font-size: 15px;
      line-height: 26px;
    }
  }
}